<template>
  <div class="map-content">
    <BaseLeafletMap>
      <CityName
        v-if="componentsVisible.xm"
        :labels="componentsVisible.labels"
      ></CityName>
      <CountyName
        v-if="baseLeafletMapStore.selectCity"
        :selectCity="baseLeafletMapStore.selectCity"
      ></CountyName>
      <!-- <ForestryName v-if="moduleVisible.ybModule"></ForestryName> -->
      <ForestryName></ForestryName>
      <FireRiskLocation v-if="moduleVisible.skModule"></FireRiskLocation>
      <ForestryRiskLocation
        v-if="moduleVisible.ybModule"
      ></ForestryRiskLocation>
      <DarkPointMonitoring
        v-if="moduleVisible.ybModule && componentsVisible.SBT"
      ></DarkPointMonitoring>
      <GridPointMonitoring
        v-if="moduleVisible.ybModule && componentsVisible.GDZ"
      ></GridPointMonitoring>
      <StationDialog v-if="moduleVisible.ybModule"></StationDialog>
      <MapLoad />
    </BaseLeafletMap>
    <StationDialogHistory v-if="moduleVisible.skModule"></StationDialogHistory>
    <StationDialogLatest
      v-if="moduleVisible.skModule && isShow"
    ></StationDialogLatest>
    <StationDialogHotline v-if="moduleVisible.skModule"></StationDialogHotline>
    <timeLine v-if="moduleVisible.ybModule"></timeLine>
  </div>
</template>

<script setup lang="ts">
import * as L from 'leaflet'
import CityName from '@/layouts/cityName/index.vue'
import CountyName from '@/layouts/countyName/index.vue'
import ForestryName from '@/pages/forestry/components/map-components/forestryName/index.vue'
import FireRiskLocation from '@/pages/forestry/components/map-components/fireRiskLocation/index.vue'
import ForestryRiskLocation from '@/pages/forestry/components/map-components/forestryRiskLocation/index.vue'
import DarkPointMonitoring from '@/pages/forestry/components/map-components/darkPointMonitoring/index.vue'
import GridPointMonitoring from '@/pages/forestry/components/map-components/gridPointMonitoring/index.vue'
import StationDialogHistory from '@/pages/forestry/components/station-dialog-history.vue'
import StationDialogLatest from '@/pages/forestry/components/station-dialog-latest.vue'
import StationDialogHotline from '@/pages/forestry/components/station-dialog-hotline.vue'
import StationDialog from '@/pages/forestry/components/station-dialog.vue'
import timeLine from '@/pages/forestry/components/time-line.vue'
import MapLoad from './map-load.vue'
import { fireInsuranceStore } from '@/pages/forestry/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
const baseLeafletMapStore = useBaseLeafletMapStore()
const fireStore = fireInsuranceStore()
const permissions = localStorage.getItem('userInfo')
const isShow = computed(() => {
  return (
    permissions.includes('forestFire:monitor') || permissions.includes('*:*:*')
  )
})
const mapLoading = computed(() => fireStore.mapLoading)

const componentsVisible = computed(() => fireStore.componentsVisible)
const moduleVisible = computed(() => fireStore.moduleVisible)

onMounted(() => {
  fireStore.moduleVisible.skModule = true
  fireStore.moduleVisible.ybModule = false
})
</script>

<style scoped lang="scss">
.map-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
